<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能客服</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .chat-container {
            height: calc(100vh - 120px);
        }
        .message-bubble {
            animation: fadeIn 0.3s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .voice-recording {
            animation: pulse 1s infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto max-w-4xl h-screen flex flex-col">
        <!-- 头部 -->
        <header class="bg-blue-600 text-white p-4 shadow-lg">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-robot text-2xl mr-3"></i>
                    <h1 class="text-xl font-bold">AI智能客服</h1>
                </div>
                <div class="text-sm opacity-80">
                    <i class="fas fa-circle text-green-400 mr-1"></i>在线
                </div>
            </div>
        </header>

        <!-- 聊天区域 -->
        <div class="flex-1 bg-white overflow-y-auto chat-container" id="chatContainer">
            <div class="p-4">
                <!-- 欢迎消息 -->
                <div class="flex items-start mb-4">
                    <div class="bg-blue-500 rounded-full p-2 mr-3">
                        <i class="fas fa-robot text-white"></i>
                    </div>
                    <div class="bg-gray-100 rounded-lg p-3 max-w-xs lg:max-w-md message-bubble">
                        <p class="text-gray-800">您好！我是AI智能客服，有什么可以帮助您的吗？</p>
                        <span class="text-xs text-gray-500 mt-1 block">刚刚</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="bg-white border-t p-4">
            <div class="flex items-center space-x-3">
                <button id="voiceBtn" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3 transition-colors">
                    <i class="fas fa-microphone"></i>
                </button>
                <input 
                    type="text" 
                    id="messageInput" 
                    placeholder="输入您的问题..." 
                    class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                <button id="sendBtn" class="bg-blue-500 hover:bg-blue-600 text-white rounded-lg px-6 py-2 transition-colors">
                    <i class="fas fa-paper-plane mr-2"></i>发送
                </button>
            </div>
            <div id="voiceStatus" class="text-sm text-gray-500 mt-2 hidden">
                <i class="fas fa-circle voice-recording text-red-500 mr-1"></i>正在录音...
            </div>
        </div>
    </div>

    <script>
        class AIChatBot {
            constructor() {
                this.chatContainer = document.getElementById('chatContainer');
                this.messageInput = document.getElementById('messageInput');
                this.sendBtn = document.getElementById('sendBtn');
                this.voiceBtn = document.getElementById('voiceBtn');
                this.voiceStatus = document.getElementById('voiceStatus');
                
                this.recognition = null;
                this.isRecording = false;
                
                this.initEventListeners();
                this.initSpeechRecognition();
            }

            initEventListeners() {
                this.sendBtn.addEventListener('click', () => this.sendMessage());
                this.messageInput.addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') this.sendMessage();
                });
                this.voiceBtn.addEventListener('click', () => this.toggleVoiceInput());
            }

            initSpeechRecognition() {
                if ('webkitSpeechRecognition' in window) {
                    this.recognition = new webkitSpeechRecognition();
                    this.recognition.lang = 'zh-CN';
                    this.recognition.continuous = false;
                    this.recognition.interimResults = false;

                    this.recognition.onstart = () => {
                        this.isRecording = true;
                        this.voiceStatus.classList.remove('hidden');
                        this.voiceBtn.classList.add('bg-red-500', 'hover:bg-red-600');
                        this.voiceBtn.classList.remove('bg-blue-500', 'hover:bg-blue-600');
                    };

                    this.recognition.onresult = (event) => {
                        const transcript = event.results[0][0].transcript;
                        this.messageInput.value = transcript;
                        this.sendMessage();
                    };

                    this.recognition.onend = () => {
                        this.isRecording = false;
                        this.voiceStatus.classList.add('hidden');
                        this.voiceBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
                        this.voiceBtn.classList.add('bg-blue-500', 'hover:bg-blue-600');
                    };

                    this.recognition.onerror = (event) => {
                        console.error('语音识别错误:', event.error);
                        this.isRecording = false;
                        this.voiceStatus.classList.add('hidden');
                        this.voiceBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
                        this.voiceBtn.classList.add('bg-blue-500', 'hover:bg-blue-600');
                    };
                }
            }

            toggleVoiceInput() {
                if (!this.recognition) {
                    alert('您的浏览器不支持语音识别功能');
                    return;
                }

                if (this.isRecording) {
                    this.recognition.stop();
                } else {
                    this.recognition.start();
                }
            }

            async sendMessage() {
                const message = this.messageInput.value.trim();
                if (!message) return;

                this.addMessage(message, 'user');
                this.messageInput.value = '';

                // 模拟AI回复
                setTimeout(() => {
                    const aiResponse = this.generateAIResponse(message);
                    this.addMessage(aiResponse, 'ai');
                    this.speakText(aiResponse);
                }, 1000);
            }

            addMessage(content, sender) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `flex items-start mb-4 ${sender === 'user' ? 'justify-end' : ''}`;

                const avatar = sender === 'user' ? 
                    '<div class="bg-green-500 rounded-full p-2 ml-3"><i class="fas fa-user text-white"></i></div>' :
                    '<div class="bg-blue-500 rounded-full p-2 mr-3"><i class="fas fa-robot text-white"></i></div>';

                const messageContent = sender === 'user' ?
                    `<div class="bg-blue-500 text-white rounded-lg p-3 max-w-xs lg:max-w-md message-bubble">
                        <p>${content}</p>
                        <span class="text-xs opacity-80 mt-1 block">刚刚</span>
                    </div>${avatar}` :
                    `${avatar}<div class="bg-gray-100 rounded-lg p-3 max-w-xs lg:max-w-md message-bubble">
                        <p class="text-gray-800">${content}</p>
                        <span class="text-xs text-gray-500 mt-1 block">刚刚</span>
                    </div>`;

                messageDiv.innerHTML = messageContent;
                this.chatContainer.querySelector('.p-4').appendChild(messageDiv);
                this.scrollToBottom();
            }

            generateAIResponse(message) {
                const responses = [
                    "感谢您的提问，我已经记录了您的需求，会尽快为您处理。",
                    "这是一个很好的问题，让我为您详细解答。",
                    "我理解您的需求，根据您的情况，我建议您...",
                    "根据我们的经验，最好的解决方案是...",
                    "我会为您提供最专业的建议和服务。",
                    "您的问题我已经收到，正在为您查询相关信息。",
                    "这是一个常见的问题，让我来帮您解决。",
                    "感谢您的耐心等待，我已经找到了解决方案。"
                ];
                
                // 简单的关键词匹配
                if (message.includes('价格') || message.includes('费用')) {
                    return "关于价格问题，我们的服务有不同的套餐，具体价格会根据您的需求而定。建议您留下联系方式，我们的专业顾问会为您提供详细报价。";
                } else if (message.includes('时间') || message.includes('多久')) {
                    return "处理时间会根据具体情况而定，一般情况下我们会在24小时内给您回复。紧急情况我们会优先处理。";
                } else if (message.includes('帮助') || message.includes('支持')) {
                    return "我很乐意为您提供帮助！请告诉我您具体需要什么支持，我会尽力协助您解决问题。";
                }
                
                return responses[Math.floor(Math.random() * responses.length)];
            }

            speakText(text) {
                if ('speechSynthesis' in window) {
                    const utterance = new SpeechSynthesisUtterance(text);
                    utterance.lang = 'zh-CN';
                    utterance.rate = 0.8;
                    utterance.pitch = 1;
                    speechSynthesis.speak(utterance);
                }
            }

            scrollToBottom() {
                this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
            }
        }

        // 初始化聊天机器人
        document.addEventListener('DOMContentLoaded', () => {
            new AIChatBot();
        });
    </script>
</body>
</html>
